import type { Directive } from "vue";
import defaultImg from '@/assets/img/Main.jpg'

// v-lazy 指令默认图片为logo 然后图片进行懒加载并且在失败和初始情况下显示logo图片
const lazyLoad: Directive = {
  mounted(el) {
    el.onerror = () => {
      el.setAttribute("src", defaultImg);
    };
    el.setAttribute("src", defaultImg);
    const io = new IntersectionObserver((entries) => {
      const realSrc = el.dataset.src;
      if (entries[0].isIntersecting && realSrc) {
        el.setAttribute("src", realSrc);
        io.unobserve(el);
      }
    });
    io.observe(el);
  }
};
export default lazyLoad;
